<template>
  <div class="PointsExchangeRecord" :style="{minHeight:$store.state.minHeight+'rem'}">
    <myHead title="积分兑换记录"></myHead>
    <div class="wrap">
      <div class="item" v-for="(x,y) in itemList" @click="jump(y)">
        <div class="item_top">
          <p>订单号：{{x.dd}}</p><p class="status">{{'兑换成功'}}</p>
        </div>
        <div class="item_bot">
          <div class="item_left">
            <img :src="x.url" alt="">
          </div>
          <div class="item_right">
            <p class="item_name">{{x.name}}</p>
            <div class="item_money"><p>单价:&nbsp;{{x.money}}积分</p><p>数量:&nbsp;{{x.num}}</p> </div>
          </div>
        </div>
        <div class="item_msg">合计：{{x.money*x.num}}积分</div>
      </div>
    </div>
  </div>
</template>

<script>
  import myHead from "../../components/ClientComponents/lib/myHead";
  export default {
    name: "PointsExchangeRecord",
    components:{
      myHead
    },
    data(){
      return {
        itemList:[{url:'../../../static/img/shop6.png',name:'香香炸鸡饭（曲江店）',dd:'1234556484543213',money:200,num:2,status:1},
          {url:'../../../static/img/shop6.png',name:'香香炸鸡饭（曲江店）',dd:'1234556484543213',money:200,num:2,status:0},
          {url:'../../../static/img/shop6.png',name:'香香炸鸡饭（曲江店）',dd:'1234556484543213',money:200,num:2,status:1},
          {url:'../../../static/img/shop6.png',name:'香香炸鸡饭（曲江店）',dd:'1234556484543213',money:200,num:2,status:0},
          {url:'../../../static/img/shop6.png',name:'香香炸鸡饭（曲江店）',dd:'1234556484543213',money:200,num:2,status:1},
          {url:'../../../static/img/shop6.png',name:'香香炸鸡饭（曲江店）',dd:'1234556484543213',money:200,num:2,status:2}],
      }
    },
    methods:{
      jump(index){
        console.log(index)
        this.$router.push({
          name:"PointExchange"
        })
      }
    }
  }
</script>

<style scoped>
  .PointsExchangeRecord{
    width: 100%;
    box-sizing: border-box;
    padding-top: .6rem;
    background-color: #F5F5F5;
  }



  .item {
    width: 100%;
    background-color: #FFFFFF;
    margin-bottom: .1rem;
  }
  .item_bot {
    height: .97rem;
    box-sizing: border-box;
    padding: .1rem .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: .01rem solid #E5E5E5;
    border-top: .01rem solid #E5E5E5;
  }
  .item_msg {
    height: .35rem;
    text-align: right;
    padding: 0 .15rem;
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #AAAAAA;
    line-height: .35rem;
  }

  .item_top {
    height: .35rem;
    box-sizing: border-box;
    padding: 0 .15rem;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }
  .item_top>p:nth-child(1) {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #444444;
  }

  .item_left {
    width: .77rem;
    height: .77rem;
    margin-right: .1rem;
  }
  .item_left>img {
    width: 100%;
  }
  .item_right {
    width: calc(100% - .9rem);
    height: 100%;
    box-sizing: border-box;
    padding: .1rem 0;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }
  .item_name {
    font-size:.14rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #000000;
  }
  .status {
    color: #FE6C00;
  }
  .item_money {
    width: 100%;
    font-size:.13rem;
    font-family:PingFang SC;
    font-weight:500;
    color: #AAAAAA;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
  }



</style>
